<template>
  <div class="content">
    <div class="con-flex">
      <div class="flex-left">
        <div class="f-l-con">
          <ul class="left-ul">
            <li
              @click="bian(index)"
              v-for="(item, index) in list"
              :key="item.id"
              :class="item.bian ? 'ul-li se' : 'ul-li'"
            >
              <div class="calllist">
                <div class="calltop">
                  <div :class="item.id"></div>
                </div>
                <div class="callname">
                  <div class="n-username">{{ item.name }}</div>
                  <div :class="item.red ? 'n-red' : 'n-info'">
                    <i
                      :class="
                        item.da ? 'el-icon-top-right' : 'el-icon-bottom-left'
                      "
                    ></i>
                    <span>{{ item.time }}</span>
                  </div>
                </div>
                <div class="callzuo">
                  <i
                    :class="
                      item.shipin
                        ? 'el-icon-video-camera'
                        : 'el-icon-phone-outline'
                    "
                  ></i>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="flex-right">
        <div class="r-con">
          <div class="zhu-top">
            <div class="row">
              <div class="cred">
                <div class="padding">
                  <div class="top">
                    <div class="tou">
                      <img src="./img/01.jpg" alt="" />
                    </div>
                    <div class="ca-call">
                      <div>Willie McLaughlin</div>
                      <div class="call-gou">
                        <span><i class="el-icon-collection-tag"></i></span>
                        <span>Co-Workers</span>
                      </div>
                    </div>
                  </div>
                  <div class="lie">
                    <div class="xi">
                      <i class="el-icon-chat-dot-square"></i>
                    </div>
                    <div class="hua">
                      <i class="el-icon-phone"></i>
                    </div>
                    <div class="shi">
                      <i class="el-icon-video-camera"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="r-con-list">
          <div class="con-2">
            <div>
              <div class="card" v-for="item in LIST" :key="item.id">
                <div class="padd">
                  <div class="ca-call-list">
                    <div class="list-left">
                      <div :class="item.green ? 'green' : 'yellow'">
                        <i
                          :class="
                            item.green
                              ? 'el-icon-finished'
                              : 'el-icon-top-right'
                          "
                        ></i>
                      </div>
                      <div class="ca">
                        <div>{{ item.name }}</div>
                        <span>{{ item.time }}</span>
                      </div>
                    </div>
                    <div class="list-right">
                      <div :class="item.shipin ? 'blue' : 'green'">
                        <i
                          :class="
                            item.shipin
                              ? 'el-icon-video-camera'
                              : 'el-icon-phone'
                          "
                        ></i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 'a1',
          name: 'Jack P. Angulo',
          da: true,
          time: 'Today at 10:02AM',
          shipin: false,
          red: false,
          bian: false,
        },
        {
          id: 'a2',
          name: 'Willie McLaughlin',
          da: false,
          time: 'Today at 10:02AM',
          shipin: true,
          red: false,
          bian: true,
        },
        {
          id: 'a3',
          name: 'Andrew Showalter',
          da: true,
          time: 'Today at 10:02AM',
          shipin: false,
          red: false,
          bian: false,
        },
        {
          id: 'a4',
          name: 'Marguerite E. Hutchings',
          tong: true,
          time: 'Today at 10:02AM',
          shipin: true,
          red: true,
          bian: false,
        },
        {
          id: 'a5',
          name: 'Earnest Clements',
          tong: true,
          time: 'Yesterday at 11:22AM',
          shipin: true,
          red: true,
          bian: false,
        },
        {
          id: 'a6',
          name: 'Marguerite E. Hutchings',
          tong: true,
          time: 'Yesterday at 11:22AM',
          shipin: false,
          red: false,
          bian: false,
        },
      ],
      LIST: [
        {
          id: 1,
          green: true,
          jie: true,
          name: 'Incoming Call',
          time: '5 Minutes ago - 12m 26s',
          shipin: true,
        },
        {
          id: 2,
          green: false,
          jie: false,
          name: 'Outgoing Call',
          time: '5 Minutes ago - 12m 26s',
          shipin: false,
        },
        {
          id: 3,
          green: false,
          jie: false,
          name: 'Missed Call',
          time: '5 Minutes ago',
          shipin: false,
        },
        {
          id: 4,
          green: true,
          jie: true,
          name: 'Incoming Call',
          time: '5 Minutes ago - 12m 26s',
          shipin: true,
        },
        {
          id: 5,
          green: true,
          jie: true,
          name: 'Incoming Call',
          time: '5 Minutes ago - 12m 26s',
          shipin: true,
        },
        {
          id: 6,
          green: true,
          jie: true,
          name: 'Incoming Call',
          time: '5 Minutes ago - 12m 26s',
          shipin: true,
        },
        {
          id: 7,
          green: true,
          jie: true,
          name: 'Incoming Call',
          time: '5 Minutes ago - 12m 26s',
          shipin: true,
        },
        {
          id: 8,
          green: false,
          jie: false,
          name: 'Outgoing Call',
          time: '5 Minutes ago - 12m 26s',
          shipin: false,
        },
      ],
    }
  },
  methods: {
    bian(i) {
      this.list.map((v) => (v.bian = false))
      this.list[i].bian = !this.list[i].bian
    },
  },
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
.content {
  display: flex;
  flex: 1 1 auto;
  padding-left: 5rem;
  margin-top: 4.5625rem;
  height: 673px;
  .con-flex {
    display: flex;
    flex: 1 1 auto;
    height: 100%;
    .flex-left {
      border-right: 1px solid #dadce0;
      background: #fff;
      flex: 0 0 30%;
      display: flex;
      flex-direction: column;
      position: relative;
      .f-l-con {
        position: relative;
        height: 675px;
        .left-ul {
          display: flex;
          flex-direction: column;
          .ul-li {
            display: flex;
            align-items: center;
            color: inherit;
            cursor: pointer;
            font-size: 0.9375rem;
            .calllist {
              display: flex;
              padding: 1rem 1rem 1rem 1.5rem;
              flex-basis: 100%;
              border-bottom: 1px solid #f1f3f5;
              .calltop {
                border-radius: 100%;
                margin-right: 1rem;
                display: inline-flex;
                position: relative;
                div {
                  background-image: url('./img/spritesheet.png');
                  background-repeat: no-repeat;
                  display: block;
                  width: 3.125rem;
                  height: 3.125rem;
                  border-radius: 6.25rem;
                  margin-right: 1rem;
                }
                .a1 {
                  background-position: -65px -5px;
                }
                .a2 {
                  background-position: -185px -5px;
                }
                .a3 {
                  background-position: -245px -5px;
                }
                .a4 {
                  background-position: -305px -5px;
                }
                .a5 {
                  background-position: -125px -5px;
                }
                .a6 {
                  background-position: -365px -5px;
                }
              }
              .callname {
                display: flex;
                flex-direction: column;
                justify-content: center;
                flex: 1;
                .n-username {
                  font-weight: 600;
                  // overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  line-height: 1.25rem;
                  max-height: 1.25rem;
                  -webkit-line-clamp: 1;
                  -webkit-box-orient: vertical;
                }
                .n-info {
                  font-size: 0.8125rem;
                  height: 1rem;
                  i {
                    margin-right: 0.3125rem;
                    vertical-align: middle;
                    line-height: 1;
                  }
                }
                .n-red {
                  color: #dc3545 !important;
                  font-size: 0.8125rem;
                  height: 1rem;
                  i {
                    margin-right: 0.3125rem;
                    vertical-align: middle;
                    line-height: 1;
                  }
                }
              }
              .callzuo {
                width: 36px;
                height: 36px;
                margin: 0.125rem;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                vertical-align: middle;
                border-radius: 50%;
                transition: all 0.2s ease-in;
                i {
                  height: 2.3rem;
                  width: 2.3rem;
                  display: inline-flex;
                  align-items: center;
                  justify-content: center;
                  padding: 0;
                  margin: 0 !important;
                  font-size: 1.2rem;
                  color: #949aa2;
                }
              }
              .callzuo:hover {
                background: #e9ecef;
              }
            }
          }
          .se {
            display: flex;
            align-items: center;
            color: inherit;
            cursor: pointer;
            font-size: 0.9375rem;
            color: #ae6eea;
            background-color: #f9f4fd;
            border-bottom: 3px solid #ae6eea;
          }
        }
      }
    }
    .flex-right {
      padding-top: 3.125rem;
      width: 100%;
      position: relative;
      height: 675px;
      overflow-y: auto;
      -ms-overflow-style: none;
      touch-action: auto;

      .r-con {
        max-width: 1140px;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
        .zhu-top {
          display: flex;
          flex-wrap: wrap;
          margin-right: -15px;
          margin-left: -15px;
          .row {
            flex: 0 0 100%;
            max-width: 100%;
            position: relative;
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
            .cred {
              background: #fff;
              position: relative;
              display: flex;
              flex-direction: column;
              min-width: 0;
              word-wrap: break-word;
              border: 1px solid rgba(0, 0, 0, 0.125);
              border-radius: 0.25rem;
              .padding {
                padding: 1.5rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .top {
                  display: flex;
                  align-items: center;
                  margin-right: auto;
                  .tou {
                    margin-right: 1rem;
                    margin-left: 1rem;
                    border-radius: 100%;
                    img {
                      height: 5rem;
                      max-width: 5rem;
                      width: 100%;
                      border-radius: 100%;
                    }
                  }
                  .ca-call {
                    font-size: 1.5rem;
                    font-weight: 700;
                    letter-spacing: -0.1px;
                    .call-gou {
                      font-size: 0.8125rem;
                      height: 1rem;
                      font-weight: 500;
                      i {
                        font-size: 1.4rem;
                        color: #949aa2;
                        margin-right: 0.3125rem;
                        vertical-align: middle;
                        line-height: 1;
                      }
                    }
                  }
                }
                .lie {
                  div {
                    width: 36.8px;
                    height: 36.8px;
                    margin: 0 0.25rem;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    vertical-align: middle;
                    border-radius: 6.25rem;
                    transition: all 0.2s ease-in;
                    i {
                      color: #fff;
                      margin: 0 !important;
                      font-size: 1.2rem;
                    }
                  }
                  .xi {
                    background: #ae6eea;
                  }
                  .hua {
                    background: #28a745;
                  }
                  .shi {
                    background: #03a9f4;
                  }
                }
              }
            }
          }
        }
      }
      .r-con-list {
        display: flex;
        flex-wrap: wrap;
        margin-top: 3rem !important;
        .con-2 {
          position: relative;
          width: 100%;
          padding-right: 15px;
          padding-left: 15px;
          flex: 0 0 100%;
          max-width: 100%;
          div {
            position: relative;
            color: #3e4247;
            .card {
              margin: 0 1rem;
              margin-bottom: 0.625rem;
              background: #fff;
              position: relative;
              display: flex;
              flex-direction: column;
              min-width: 0;
              word-wrap: break-word;
              border: 1px solid rgba(0, 0, 0, 0.125);
              border-radius: 0.25rem;
              .padd {
                flex: 1 1 auto;
                padding: 1.25rem;
                .ca-call-list {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  .list-left {
                    display: flex;
                    align-items: center;
                    .green {
                      display: inline-flex;
                      align-items: center;
                      justify-content: center;
                      vertical-align: middle;
                      border-radius: 6.25rem;
                      transition: all 0.2s ease-in;
                      border: 1px solid #dadce0;
                      border-color: #28a745;
                      margin-right: 1rem;
                      i {
                        height: 2.5rem;
                        width: 2.5rem;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        padding: 0;
                        font-size: 1.25rem;
                        color: #28a745;
                      }
                    }
                    .yellow {
                      display: inline-flex;
                      align-items: center;
                      justify-content: center;
                      vertical-align: middle;
                      border-radius: 6.25rem;
                      transition: all 0.2s ease-in;
                      border: 1px solid #dadce0;
                      border-color: #ffc107;
                      margin-right: 1rem;
                      i {
                        height: 2.5rem;
                        width: 2.5rem;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        padding: 0;
                        font-size: 1.25rem;
                        color: #ffc107;
                      }
                    }
                    .ca {
                      font-weight: 600;
                      span {
                        font-size: 0.8125rem;
                        height: 1.25rem;
                        font-weight: 400;
                      }
                    }
                  }
                  .list-right {
                    div {
                      display: inline-flex;
                      align-items: center;
                      justify-content: center;
                      cursor: pointer;
                      vertical-align: middle;
                      border-radius: 6.25rem;
                      transition: all 0.2s ease-in;
                      i {
                        color: #fff;
                        margin: 0 !important;
                        font-size: 1.2rem;
                        height: 2.3rem;
                        width: 2.3rem;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        padding: 0;
                      }
                    }
                    .blue {
                      background: #03a9f4;
                    }
                    .green {
                      background: #28a745;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    ::-webkit-scrollbar {
      width: 5px;
    }
    ::-webkit-scrollbar-thumb {
      border-radius: 2.5px;
      background-color: rgb(204, 204, 204);
    }
    ::-webkit-scrollbar-track {
      background: #fff;
      border-radius: 2.5px;
    }
  }
}
</style>
